<template>
  <!-- 分页 -->
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li :class="isFirstPage? 'disabled' : ''">
        <a href="javascript:;" aria-label="Previous" @click="previousPage">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li :class="n == 1 ? 'active': ''" v-for="n in getTotalPages"><a href="javascript:;" @click="jumpPage(n, $event)">{{ n }}</a></li>
      <li :class="isLastPage? 'disabled' : ''">
        <a href="javascript:;" aria-label="Next" @click="nextPage">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
  <!-- 分页 end -->
</template>

<script>
  export default {
    name: 'vPageBar',
    props: ['pageInfo'],
    computed: {
      getTotalPages() {
        if (!this.pageInfo) {
          return 1;
        }
        if (!this.pageInfo.totalPages || this.pageInfo.totalPages <= 0) {
          return 1;
        }
        return this.pageInfo.totalPages;
      },
      isFirstPage() {
        return this.pageIndex == 1;
      },
      isLastPage() {
        var totalPages = 1;
        if (this.pageInfo && this.pageInfo.totalPages && this.pageInfo.totalPages > 0) {
          totalPages = this.pageInfo.totalPages;
        }
        return this.pageIndex == totalPages;
      }
    },
    watch: {
      pageInfo: {
        handler: function (newVal, oldVal) {
            this.pageIndex = 1;
            this.pageStatus = 'ok';
            jQuery('ul.pagination').find('li.active').removeClass('active');
            jQuery('ul.pagination > li:eq(1)').addClass('active');
          },
        deep: true
      }
    },
    data() {
        return {
            pageIndex: 1,
            pageStatus: 'ok'
        }
    },
    methods: {
      jumpPage(i, event) {
        if (this.pageIndex == i) {
          return;
        }
        //console.log('n++++=:',i);
        this.doPageBarRequest('jump', i, event.target);
        // this.pageIndex = i;
        // jQuery(event.target).parent('li').addClass('active').siblings().removeClass('active');
      },
      previousPage() {
        if (this.isFirstPage) {
          return;
        }
        //console.log('<<<<<<<<<<<<<<');
        this.doPageBarRequest('prev');
        // this.pageIndex = this.pageIndex - 1;
        // jQuery('ul.pagination').find('li.active').removeClass('active').prev('li').addClass('active');
      },
      nextPage() {
        if (this.isLastPage) {
          return;
        }
        //console.log('>>>>>>>>>>>>>>>');
        this.doPageBarRequest('next');
        // this.pageIndex = this.pageIndex + 1;
        // jQuery('ul.pagination').find('li.active').removeClass('active').next('li').addClass('active');
      },
      doPageBarRequest(action, param1, param2) {
        var self = this;
        // 校验状态
        if (self.pageStatus == 'wait') {
          return;
        }
        if (!self.pageInfo || !self.pageInfo.queryUrl) {
          return;
        }
        // 拼接请求参数
        var queryParams = {};
        if (self.pageInfo && self.pageInfo.queryParams) {
          queryParams = self.pageInfo.queryParams;
        }
        if (self.pageInfo && self.pageInfo.pageSize) {
          queryParams.pageSize = self.pageInfo.pageSize;
        }
        if (action === 'jump') {
          queryParams.pageNumber = param1;
        } else if (action === 'prev') {
          queryParams.pageNumber = self.pageIndex - 1;
        } else if (action === 'next') {
          queryParams.pageNumber = self.pageIndex + 1;
        }
        // 发送请求
        self.pageStatus = 'wait';
        self.$doGet(self.pageInfo.queryUrl, queryParams, function(respData) {
          self.pageStatus = 'ok';
          if (respData.code === 0) {
            // 请求成功后，执行....
            if (action === 'jump') {
              self.pageIndex = param1;
              jQuery(param2).parent('li').addClass('active').siblings().removeClass('active');
            } else if (action === 'prev') {
              self.pageIndex = self.pageIndex - 1;
              jQuery('ul.pagination').find('li.active').removeClass('active').prev('li').addClass('active');
            } else if (action === 'next') {
              self.pageIndex = self.pageIndex + 1;
              jQuery('ul.pagination').find('li.active').removeClass('active').next('li').addClass('active');
            }
            // 通知父组件，渲染表格数据
            self.$emit('page-callback', respData);
          }
        });
      }
    }
  }
</script>

<style>
  
</style>